<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
    </head>
    <body>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-btn-group">
                    <button type="button" data-type="search" id="search" class="layui-btn">检索</button>
                    <button type="button" data-type="add" id="add" class="layui-btn">增加</button>
                </div>
            </div>
        </div>
        <table class="layui-hide" id="test" lay-filter="tableEvent"></table>
        <script src="../../../js/layui/layui.js"></script>
        <script src="../../../js/myJQ.js"></script>
        <script>
            layui.use(['table','jquery','layer'], function(){

                var basePath = getRootPath();
                var table = layui.table;
                var $ = layui.$;
                var form = layui.form;
                var layer = layui.layer;
                table.render({
                    elem: '#test'
                    ,url:'/role/getRoleList/'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,cols: [[

                        {field:'id', width:120, title: 'ID', sort: true}
                        ,{field:'name', width:150, title: '角色名称'}
                        ,{field:'sort', width:150, title: '排序'}
                        ,{field:'description', width:150, title: '描述'}
                        ,{field:'insertDate', width:200, title: '创建时间',templet:function (data) {
                                if(data.insertDate!=null&&data.insertDate!="")
                                    return layui.util.toDateString(data.insertDate,'yyyy-MM-dd HH:mm:ss');
                                else return ""
                            }}
                        ,{field:'updateDate',width:200, title: '更新时间',templet:function (data) {
                                debugger
                                if(data.updateDate!=null&&data.updateDate!="")
                                    return layui.util.toDateString(data.updateDate,'yyyy-MM-dd HH:mm:ss');
                                else return""
                            }}
                        ,{field:'caozuo',width:250, title: '操作',templet:function (data) {
                                return '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="edt" lay-event="edt" lay-id="'+ data.id +'">' +
                                    '<i class="layui-icon layui-icon-edit"></i>编辑</a>' +
                                    '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="del" lay-event="del" lay-id="'+ data.id +'">' +
                                    '<i class="layui-icon layui-icon-delete"></i>移除</a>';
                            }}
                    ]]
                });

                var active = {
                    edt:function (obj) {
                        debugger;
                    },
                    del:function (obj) {
                        debugger;
                    }
                }

                var update = function(data){
                    var roleId= data.id;
                    var url = "/role/updateById",title="编辑" ,path = "/role/addPage?id="+roleId,area =['350px', '400px'];
                    layer.open({
                        type: 2,
                        title: title, //不显示标题栏
                        closeBtn: 2,
                        area: area,
                        shade: 0.8,
                        id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                        btn: ['保存', '取消'],
                        btnAlign: 'r',
                        moveType: 1, //拖拽模式，0或者1
                        content: path,
                        yes: function (index, layero) {
                            debugger;
                            var load = layer.load();
                            //获取当前打开窗口的html
                            var body = layer.getChildFrame('body', index);
                            var id = body.find("#id").val();
                            var name = body.find("#name").val();
                            var sort = body.find("#sort").val();
                            var decrp = body.find("#description").val();
                            if(name.trim()==''){
                                layer.msg('角色名称不能为空',function () {
                                    time:2000
                                });
                                return false;
                            }
                            var params = {};
                            params.id = id;
                            params.name = name;
                            params.sort = sort;
                            params.description = decrp;
                            $.ajax({
                                url:basePath+url,
                                dataType:'json',
                                type:"POST",
                                data:params,
                                success:function (result) {
                                    debugger;
                                    layer.close(load);
                                    layer.msg(result.msg,{time:5000});
                                    if(result.returnValue="OK"){
                                        location.reload();
                                    }
                                }
                            });

                        },
                        btn2: function (index, layero) {
                            debugger;
                        }
                    });
                }

                var deletRole = function(obj){
                    var params = {};
                    params.id=obj.id;
                    $.ajax({
                        url:basePath+"/role/deletRole",
                        data:params,
                        dataType:'json',
                        type:'POST',
                        success:function (result) {
                            layer.msg(result.msg)
                            location.reload();
                        }
                    });
                }

                //监听工具条
                table.on('tool(tableEvent)', function (obj) {
                    var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
                    console.log(data);
                    switch(event){
                        case "edt":
                            update(data);
                            break;
                        case "del":
                            deletRole(data);
                            break;
                    }
                });


                $("#add").click(function () {
                    var title = "新增",path = "/role/addPage",area =['350px', '400px'],url="/role/addRole";
                    open(title,path,url,area);
                });

                /**
                 * 打开新的窗口
                 * @param title 窗口名
                 * @param path 窗口路径
                 * @param url  后台数据交换路径
                 */
                var open = function(title,path,url,area){
                    layer.open({
                        type: 2,
                        title: title, //不显示标题栏
                        closeBtn: 2,
                        area: area,
                        shade: 0.8,
                        id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                        btn: ['保存', '取消'],
                        btnAlign: 'r',
                        moveType: 1, //拖拽模式，0或者1
                        content: path,
                        yes: function (index, layero) {
                            debugger;
                            var load = layer.load();
                            //获取当前打开窗口的html
                            var body = layer.getChildFrame('body', index);
                            var name = body.find("#name").val();
                            var sort = body.find("#sort").val();
                            var decrp = body.find("#description").val();
                            if(name.trim()==''){
                                layer.msg('角色名称不能为空',function () {
                                    time:2000
                                });
                                return false;
                            }
                            var addForm = body.find(".layui-form").serialize();
                            $.ajax({
                                url:basePath+url,
                                dataType:'json',
                                type:"POST",
                                data:{name:name,sort:sort,description:decrp},
                                success:function (result) {
                                    debugger;
                                    layer.close(load);
                                    layer.msg(result.msg,{time:5000});
                                    if(result.returnValue="OK"){
                                        location.reload();
                                    }
                                }
                            });

                        },
                        btn2: function (index, layero) {
                        }
                    });
                }
            });


        </script>
    </body>
</html>